import React, { useEffect, useRef, useState } from 'react'
import './VideoIndex.css'

function VideoIndex(props) {
  let { ImageList } = props;

  // 获取video播放器元素
  const sourceRef = useRef()
  const [times, setTimes] = useState()

  // 首次进页面获取视频时长
  useEffect(() => {
    let timer = setTimeout(() => {
      // 获取视频总时长
      let second = sourceRef.current.duration;
      console.log(second, '总时长');
      if (second > 60) { //判断如果大于一分钟 
        let minute = `${Math.floor(second / 60)}:${Math.floor(second % 60)}`
        setTimes(minute)
      } else { //判断如果小于一分钟 
        setTimes(`00:${Math.floor(sourceRef.current.duration)}`)
      }

    }, 500)

    // 卸载组件销毁定时器
    return () => {
      console.log('卸载');
      clearTimeout(timer)
    }
  }, [])

  // 划入视频事件
  const OverVideo = () => {
    sourceRef.current.play()  //开始播放
  }

  // 划出视频事件
  const OutVideo = () => {
    sourceRef.current.pause() //暂停播放
  }

  return (
    <div className='video-Box' onMouseOver={OverVideo} onMouseOut={OutVideo}>
      <video ref={sourceRef} loop width="100%" height="100%">
        <source src={ImageList} type="video/mp4" />
      </video>
      <div className='videoDuration'>
        {times}
      </div>
    </div>
  )
}

export default VideoIndex
